﻿@using HrEFCore.Models
@model Roles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="~/aa/vue/dist/vue.js"></script>
	<script src="~/aa/element-ui/lib/index.js"></script>
	<link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
	<script src="~/aa/axios/dist/axios.js"></script>
	<link rel="stylesheet" href="~/css/table.css" type="text/css"></link>
	<script type="text/javascript" src="~/javascript/comm/comm.js"></script>
	<script type="text/javascript" src="~/javascript/jquery-1.7.2.js"></script>
	<style type="text/css">
		body {
			background: rgb(253,244,227);
		}

		.TD_STYLE1 {
			background: #E6DDCE;
			/* color:white; */
		}

		.TD_STYLE2 {
			background: rgb(253,244,227);
		}

		.INPUT_STYLE2 {
			background: rgb(253,244,227);
		}
	</style>
</head>
<body>
	<form action="/Roles/Update" method="post" id="app">
		<table style="width:100%;margin-top:10px;height:30px;background-color:rgb(253,244,227)">
			<tr>
				<td>
					<font color="black">您正在做的业务是：人力资源--权限管理--修改角色</font>
				</td>
			</tr>
			<tr>
				<td align="right">
					<input type="submit" value="保存" class="BUTTON_STYLE1" v-on:click="submitForm" />
					<input type="button" value="返回" class="BUTTON_STYLE1"
						   onclick="history.back()">
				</td>
			</tr>
		</table>
		<table width="100%" border="1" cellpadding=3 cellspacing=1
			   bordercolorlight=#848284 bordercolordark=#eeeeee
			   class="TABLE_STYLE1 table-bordered">
			<tr>
				<td class="TD_STYLE1">角色名称</td>
				<td class="TD_STYLE2">
					<input type="text" id="RolesID" name="RolesID" value="@Model.RolesID" style="display:none" />
					<input type="text" id="roleName" name="RolesName" value="@Model.RolesName" />
				</td>
				<td class="TD_STYLE1">角色说明</td>
				<td class="TD_STYLE2">
					<input type="text" name="RolesInstruction" value="@Model.RolesInstruction" />
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">角色是否可用</td>
				<td colspan="3" class="TD_STYLE2">
					<select name="RolesIf" style="background: rgb(253,244,227);">
						@* <option value="@Model.RolesIf">@Model.RolesIf</option> *@
						@if (Model.RolesIf == true)
						{
							<option value="true">是</option>
						}
						@if (Model.RolesIf == false)
						{
							<option value="false">否</option>
						}
						@if (Model.RolesIf == true)
						{
							<option value="false">否</option>
						}
						@if (Model.RolesIf == false)
						{
							<option value="true">是</option>
						}
						<lect>
				</td>
			</tr>
		</table>
		<table>
			<hr />
			<el-tree show-checkbox
					 :data="treeData"
					 :props="defaultProps"
					 node-key="juriID"
					 :default-expand-all="true"
					 :default-checked-keys="checkedKeys"
					 ref="tree"
					 v-on:check-change="handleCheckChange">
			</el-tree>
		</table>
	</form>
	<script>
		var roleId = '@ViewData["RoleId"]'; // 获取roleId
		var vm = new Vue({
			el: '#app',
			data() {
				return {
					treeData: [],
					defaultProps: {
						children: 'children',
						label: 'jurName'
					},
					checkedKeys: [],
				};
			},
			methods: {
				loadData() {
					axios.get('/Roles/MenuTree')
						.then(response => {
							this.treeData = response.data;
						}).catch(() => { });
				},
				handleCheckChange(checkedKeys, e) {
					this.checkedKeys = checkedKeys;
				},
				async loadCheckedKeys() {
					const response = await axios.get(`/Roles/MenuTreeById?id=${roleId}`);
					const checked = this.getCheckedKeys(response.data);
					this.checkedKeys = checked; // 直接赋值为数组
					console.log("checkedKeys: " + this.checkedKeys);
					console.log("treeData: " + this.treeData.data);
				},
				getCheckedKeys(data) {
					const checked = [];
					// 根据返回的数据结构，将需要选中的节点的node-key放入checkedKeys数组中
					// 例如，假设返回的数据结构为[{juriID: 1}, {juriID: 2}, {juriID: 3}]
					data.forEach(item => {
						checked.push(item.juriID.toString());
					});
					console.log("checked: " + checked);
					return checked;// 返回数组
				},
				submitForm() {
					// 获取选中的树节点
					const checkedNodes = this.$refs.tree.getCheckedNodes();

					// 提取选中节点的juriID值
					const selectedNodeKeys = checkedNodes.map(node => node.juriID.toString());

					// 发送到后端
					axios.post(`/Roles/Update2?selectedNodeKeys=${selectedNodeKeys}`)
				}
			},
			mounted() {
				this.loadData();
				this.loadCheckedKeys();
			}
		});
	</script>
</body>
</html>